<template>
	<div class="drag-list">
		<lilo-drag-list :dataProvider="dataProvider" draggable :valueKey="valueKey" @sorted="sorted">
			<template slot-scope='{ item, index }'>
				<div>
					<span class="list-item">index：{{ index }}</span>
					<span class="list-item">id：{{ item.id }}</span>
					<span class="list-item">name：{{ item.name }}</span>
					<span class="list-item">address：{{ item.address }}</span>
				</div>
			</template>
		</lilo-drag-list>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				draggable: true, //是否可拖动，默认为true
				valueKey: 'id', //数据项的唯一标识
				dataProvider: [
					{ id: 'S001', name: '张三', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S002', name: '李四', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S003', name: '王五', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S004', name: '张飞', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S005', name: '关羽', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S006', name: '嬴政', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S007', name: '廉颇', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S008', name: '蒙恬', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S009', name: '韩非', address: '湖北省武汉市江岸区百步亭花园现代城3区' }
				]
			}
		},
		methods: {
			sorted(list) { //拖动完成之后触发
				console.log(list) //改变后的数组顺序
				console.log(this.dataProvider) //原数据顺序不会被改变
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drag-list {
		padding: 10px;
		.list-item {
			margin: 0 5px;
		}
	}
</style>